<template>
	<view class="new_box">
		<view class="time">
			<p>{{ content.sendTime }}</p>
		</view>
		<view class="news">
			<div class="news_top">
				<p class="title">
					<i class="flag" v-if="content.read == 0"></i>
					<span>{{ content.msgCategoryStr }}</span>
				</p>
				<p class="text">{{ content.title }}</p>
			</div>
			<div class="news_bottom" @click="lookDetail(content.id,content.messageId)">
				<span>查看详情</span>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</div>
		</view>
	</view>
</template>
<script>
export default {
	props: ['content'],
	data() {
		return {};
	},
	methods: {
		lookDetail(id,messageId) {
			this.$emit('toDetail',{id,messageId})
			console.log(id);
		}
	}
};
</script>

<style lang="scss" scoped>
.time {
	text-align: center;
	p {
		display: inline-block;
		background: rgba(225, 225, 225, 1);
		border-radius: 30rpx;
		font-size: 24rpx;
		padding: 5rpx 25rpx;
		color: #fff;
		margin: 20rpx 0;
	}
}
.news {
	background: #fff;
	width: 90%;
	margin: 0 auto;
	border-radius: 10rpx;
	padding: 30rpx 25rpx 0 25rpx;
	.news_top {
		border-bottom: 1rpx solid #f1f1f1;
		.title {
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			display: flex;
			align-items: center;
			.flag {
				display: inline-block;
				width: 15rpx;
				height: 15rpx;
				border-radius: 15rpx;
				background: #ff2b45;
				margin-right: 10rpx;
			}
		}
		.text {
			font-size: 28rpx;
			color: #c4c4c4;
			margin: 15rpx 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.news_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}
}
</style>
